import React from 'react';
import NavBar from '../Common/NavBar';
import CommentList from './CommentList';

class CommentBox extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            value: '',
            comments: ['评论1', '评论2']
        }
        this.handleChange = this.handleChange.bind(this)

    }
    handleChange(e) {
        this.setState({
            value: e.target.value
        })
    }
    handleSubmit(event) {
        // alert(this.state.value);
        event.preventDefault();
        if (this.state.value !== '') {
            this.setState({
                comments: [...this.state.comments, this.state.value]
            })
            this.state.value = ''
        }
        
    }
    render() {
        return (
            <div>
                <NavBar title="留言板"></NavBar>
                <br></br>
                <CommentList comments={ this.state.comments }></CommentList>
                <form className="p-5" onSubmit={ (event) => {this.handleSubmit(event)} }>
                    <div className="form-group">
                        <label>留言板</label>
                        <input
                        type="text"
                        className="form-control"
                        placeholder="输入留言内容"
                        onChange = { this.handleChange }
                        value={ this.state.value }
                        // onAddComment= { this.addComment }
                        ></input>
                    </div>
                    <button type="submit" className="btn btn-primary">提交留言</button>
                    <p>共 {this.state.comments.length} 条留言</p>
                </form>
                
            </div>
        )
    }
}

export default CommentBox;